<template>
    <!-- block5 -->
    <div class="block5">
        <div class="block5-container max-width">
            <div class="block5-left">
                <div class="text-[43px]">专为 大规模采用。</div>
                <div class="flex gap-[4px]">
                    <div class="block5-left-icon"></div>
                    <div class="block5-left-text">实时数据</div>
                </div>
            </div>

            <div class="block5-center-container">
                <div class="block5-center-box1-container">
                    <div class="flex flex-col gap-[30px] flex-wrap flex-1">
                        <div class="flex flex-col gap-[20px]">
                            <div class="text-24px font-bold border-l-(2px solid [#22CCEE]) pl-[13px]">快速</div>
                            <div class="text-([#D0D0DC] [18.5px]) leading-[28px]">
                                不要让你的用户等待。Solana 的出块时间为 400 毫秒 —— 随着硬件变得更快，网络也会变得更快。
                            </div>
                        </div>
                        <div class="flex flex-col gap-[15px]">
                            <div class="flex gap-[4px]">
                                <div class="w-[5px] h-[5px] bg-[#22CCEE] rounded-[50%] mt-[12px]"></div>
                                <div class="text-[27px] text-[#C5C5D0]">3,258</div>
                            </div>
                            <div class="text-[12.3px] text-[#C5C5D0]">笔交易/秒</div>
                        </div>
                    </div>
                </div>
                <div class="block5-center-box2-container">
                    <div class="flex flex-col gap-[30px] flex-wrap flex-1">
                        <div class="flex flex-col gap-[20px]">
                            <div class="text-24px font-bold border-l-(2px solid [#9945FF]) pl-[13px]">可扩展的</div>
                            <div class="text-([#D0D0DC] [18.5px]) leading-[28px]">
                                迅速壮大。Solana 专为处理每秒数千笔交易，且使开发者和用户的使用费用保持在 0.0025
                                美元以下。
                            </div>
                        </div>
                        <div class="flex flex-col gap-[15px]">
                            <div class="flex gap-[4px]">
                                <div class="w-[5px] h-[5px] bg-[#9945FF] rounded-[50%] mt-[12px]"></div>
                                <div class="text-[27px] text-[#C5C5D0]">310,025,492,982</div>
                            </div>
                            <div class="text-[12.3px] text-[#C5C5D0]">交易总数</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="block5-right-container">
                <div class="block5-right-box1-container">
                    <div class="flex flex-col gap-[30px] flex-wrap flex-1">
                        <div class="flex flex-col gap-[20px]">
                            <div class="text-24px font-bold border-l-(2px solid [#FF744A]) pl-[13px]">去中心化</div>
                            <div class="text-([#D0D0DC] [18.5px]) leading-[28px]">
                                Solana 网络由数千个独立运行的节点进行验证，确保你的数据保持安全且抗审查。
                            </div>
                        </div>
                        <div class="flex flex-col gap-[15px]">
                            <div class="flex gap-[4px]">
                                <div class="w-[5px] h-[5px] bg-[#FF744A] rounded-[50%] mt-[12px]"></div>
                                <div class="text-[27px] text-[#C5C5D0]">1,501</div>
                            </div>
                            <div class="text-[12.3px] text-[#C5C5D0]">个验证者节点</div>
                        </div>
                    </div>
                </div>
                <div class="block5-right-box2-container">
                    <div class="flex flex-col gap-[30px] flex-wrap flex-1">
                        <div class="flex flex-col gap-[20px]">
                            <div class="text-24px font-bold border-l-(2px solid [#89F8CA]) pl-[13px]">高效节能</div>
                            <div class="text-([#D0D0DC] [18.5px]) leading-[28px]">
                                Solana 的权益证明网络和其他创新最大限度的减少了其对环境的影响。每笔 Solana
                                交易消耗的能量与几次 Google 搜索的能量大致相同。
                            </div>
                        </div>
                        <div class="flex flex-col gap-[15px]">
                            <div class="flex gap-[4px]">
                                <div class="text-[27px] text-[#C5C5D0]">0%</div>
                            </div>
                            <div class="text-[12.3px] text-[#C5C5D0] flex flex-col gap-[10px]">
                                <div>净碳影响</div>
                                <div class="flex gap-[10px] items-center cursor-pointer hover:text-#B0E5ED">
                                    <div>LEARN MORE</div>
                                    <div class="i-carbon:arrow-right"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.block5 {
    --at-apply: bg-[url("/block5/bg.png")] bg-container bg-no-repeat;
    background-size: 100% 125%;
}
.block5-container {
    --at-apply: flex justify-center items-start text-white py-[40px] gap-[30px];
}
.block5-left {
    --at-apply: basis-1/3 flex flex-col gap-[15px];
}
.block5-left-icon {
    --at-apply: w-[5px] h-[5px] bg-[#22CCEE] rounded-[50%] mt-[2px];
}
.block5-left-text {
    --at-apply: text-[12.3px] text-[#C5C5D0];
}
.block5-center-container {
    --at-apply: basis-1/3 flex flex-col justify-start items-start gap-[15px];
}
.block5-center-box1-container {
    --at-apply: w-[310px] h-[210px] bg-[#090909] rounded-[10px] mt-[150px] flex justify-center items-center p-[35px];
}
.block5-center-box2-container {
    --at-apply: w-[310px] h-[210px] bg-[#090909] rounded-[10px] flex justify-center items-center p-[35px];
}
.block5-right-container {
    --at-apply: basis-1/3 flex flex-col justify-start items-start gap-[15px];
}
.block5-right-box1-container {
    --at-apply: w-[310px] h-[210px] bg-[#090909] rounded-[10px] mt-[60px] flex justify-center items-center p-[35px];
}
.block5-right-box2-container {
    --at-apply: w-[310px] h-[260px] bg-[#090909] rounded-[10px] flex justify-center items-center p-[35px];
}
</style>
